<template>
    <div class="content">
        <hl-segment style="margin-top: 16px" :items="segments" v-model="type"></hl-segment>
        <hl-field @click="chooseAddress(true)" style="margin-top: 24px" :show-top-border="true"
                  :value="startLocation.address ? startLocation.address :'定位中...'"></hl-field>
        <hl-field placeholder="去哪儿？" @click="chooseAddress(false)" :value="targetLocation.address"
                  :red="true"></hl-field>
        <hl-field :value="`${peopleNum}人`" v-if="type == 0" @click="showPeople = true">
            <i class="iconfont icon-chengke" slot="prefix"></i>
        </hl-field>
        <hl-field value="1辆" v-if="type == 1">
            <i class="iconfont icon-cheliang" slot="prefix"></i>
        </hl-field>
        <p class="price-container van-hairline--bottom" v-if="path">
            <span>约</span><span class="price">{{price}}</span><span>元</span>
        </p>
        <div class="section" style="margin-top: 24px;">
            <button @click="createOrder()" :disabled="canSubmit" class="btn-primary">确定约车</button>
        </div>
        <van-popup v-model="showPeople" position="bottom">
            <van-picker :columns="columns" @cancel="showPeople = false" @confirm="onConfirm" @change="onChangePicker"
                        show-toolbar></van-picker>
        </van-popup>
    </div>
</template>

<script>
    /* eslint-disable no-console */

    import HlSegment from "../components/hl-segment";
    import HlField from "../components/HlField";
    import api from '../net/api'
    import url from '../net/url'
    import qs from "qs";

    export default {
        name: "PageShare",
        components: {HlField, HlSegment},
        data() {
            return {
                type: 0,
                segments: [
                    '拼车',
                    '包车'
                ],
                path: null,
                peopleNum: 1,
                showPeople: false,
                columns: [
                    '1人',
                    '2人',
                    '3人',
                    '4人'
                ],
                chooseStartLocation: {
                    lat: 0,
                    lng: 0,
                    address: "",
                    city: ''
                },
                targetLocation: {
                    lat: 0,
                    lng: 0,
                    address: "",
                    city: ''
                }
            }
        },


        computed: {
            canSubmit(){
                return !(this.path && this.startLocation.lat > 0 && this.startLocation.lng > 0 && this.targetLocation.lat > 0 && this.targetLocation.lng > 0)
            },

            startLocation() {

                if (!this.chooseStartLocation.address || this.chooseStartLocation.lat == 0 || this.chooseStartLocation.lng == 0) {
                    let location = this.$store.state.location;
                    return location
                } else {
                    return this.chooseStartLocation;
                }
            },
            price() {
                if (this.path) {
                    if (this.type == 1) {
                        return this.path.price.toFixed(1)
                    } else {
                        return (this.path.price / 4 * this.peopleNum).toFixed(1)
                    }
                } else {
                    return 0.0;
                }
            }
        },

        beforeDestroy() {
            window.eventBus.$off('onCityPickerChoose', this.onCityPickerChoose)
        },

        mounted() {
            window.eventBus.$on('onCityPickerChoose', this.onCityPickerChoose)
        },

        methods: {

            onCityPickerChoose(item, from, type) {
                if (from == 'share') {
                    if (type == 'start') {
                        this.chooseStartLocation = item;
                    } else {
                        this.targetLocation = item;
                    }
                    this.checkPath();
                }
            },

            createOrder() {
                if (this.path && this.startLocation.lat && this.startLocation.lng && this.targetLocation.lat && this.targetLocation.lng){
                    api.post(url.CREATE_ORDER_SHARE, qs.stringify(
                        {
                            pathId: this.path.pathid,
                            seatAmount: this.peopleNum,
                            isCharteredCar: this.type,
                            startAddress: this.startLocation.address,
                            targetAddress:this.targetLocation.address,
                            startLocation:`${this.startLocation.lng},${this.startLocation.lat}`,
                            targetLocation:`${this.targetLocation.lng},${this.targetLocation.lat}`,
                        })).then(res=>{
                        this.$toast.success(res.msg);
                        this.chooseStartLocation = {lat: 0, lng: 0, address: ""}
                        this.targetLocation = {lat: 0, lng: 0, address: ""}
                        console.log(res);
                        this.$router.pushTrasnlate({
                            path:"/share/map",
                            query:{
                                orderNo:res.data.orderno,
                                start:`${this.startLocation.lng},${this.startLocation.lat}`,
                                target:`${this.targetLocation.lng},${this.targetLocation.lat}`
                            }
                        })

                    }).catch(error=>{
                        this.$toast(error)
                    })
                }else {

                }
            },

            checkPath() {

                if (this.startLocation.lat && this.startLocation.lng && this.targetLocation.lat && this.targetLocation.lng) {
                    this.$toast.loading({
                        mask: true,
                        message: '加载中...'
                    })
                    api.post(url.GET_PATH, qs.stringify({
                        startLocation: `${this.startLocation.lng},${this.startLocation.lat}`
                        , targetLocation: `${this.targetLocation.lng},${this.targetLocation.lat}`
                    })).then(res => {
                        this.$toast.clear();
                        this.path = res.data
                    }).catch(error => {
                        this.$toast.clear();

                        this.$dialog.alert({
                            message: error
                        }).then(() => {
                            this.chooseStartLocation = {
                                lat: 0,
                                lng: 0,
                                address: 0
                            }
                            this.targetLocation = {
                                lat: 0,
                                lng: 0,
                                address: 0
                            }
                        })
                    })
                }

            },
            chooseAddress(start) {
                let type = 'start';
                if (start) {
                    type = 'start'
                } else {
                    type = 'target'
                }
                let query = {from: 'share', type: type};
                if (start) {
                    query.area = this.chooseStartLocation.area;
                    query.parent = this.chooseStartLocation.parent;

                } else {
                    if (this.targetLocation.area) {
                        query.area = this.targetLocation.area;
                        query.parent = this.targetLocation.parent;
                    }
                }
                query.showCity = !!query.area
                this.$router.pushTrasnlate({path: "/city", query: query})
            },

            onChangePicker(picker, values) {
                console.log(values)
            },
            onConfirm(value, index) {
                this.peopleNum = index + 1;
                this.showPeople = false;
            }
        }
    }
</script>

<style scoped lang="less">
    .icon-cheliang {
        font-size: 18px;
        color: #888;
    }

    .icon-chengke {
        font-size: 18px;
        color: #888;
    }

    .price-container {
        font-size: 14px;
        color: #444;
        padding-top: 16px;
        padding-bottom: 16px;
        vertical-align: baseline;
        text-align: center;
        margin: 0;
        .price {
            margin-left: 4px;
            margin-right: 4px;
            font-size: 32px;
            color: #fc1010;
        }
    }


</style>